<!-- 搜索表单 -->
<template>
  <el-form class="search-form" label-width="auto" @keyup.enter="search" @submit.prevent>
    <el-row :gutter="8">
      <el-col :md="8" :sm="12" :xs="24">
        <el-form-item label="商品">
          <el-input v-model.trim="form.keyword" clearable placeholder="请输入商品名称/编码" />
        </el-form-item>
      </el-col>
      <el-col :md="8" :sm="12" :xs="24">
        <el-form-item label="库位">
          <el-cascader
            v-model="form.location_id"
            class="w-full"
            :options="locationTree"
            filterable
            clearable
            placeholder="请选择库位"
            :show-all-levels="false"
            :props="{ value: 'id', label: 'name', expandTrigger: 'hover', emitPath: false }"
          />
        </el-form-item>
      </el-col>
      <el-col :md="8" :sm="12" :xs="24">
        <el-form-item label-width="16px">
          <el-button type="primary" @click="search">
            查询
          </el-button>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
defineProps({
  locationTree: Array,
})

const emit = defineEmits(['search'])

/** 表单数据 */
const { form, resetFields } = utils.useFormData({
  keyword: '',
  location_id: undefined,
})

/** 搜索 */
function search() {
  emit('search', form)
}
/**  重置 */
function reset() {
  resetFields()
  search()
}
</script>

<style lang="scss" scoped>
.search-form .el-form-item {
  margin-bottom: 0;
}
</style>
